<style>
	.downLoadText {
		color: #958fe9;
		border: 1px solid#958fe9;
		border-radius: 40px;
		padding: 6px 30px;
	}

	.chaxunButton {
		background: linear-gradient(to right, #488cf1, #3b45f4);
		padding: 6px 30px;
		color: #fff;
		margin-left: 20px;
		border-radius: 40px;
		cursor: pointer;
	}
</style>
<template>
	<div style="height: 100%;">

		<div style="padding: 10px;border-radius: 8px;border: 1px solid#f5f5f5;" class="displayFlexBet bgfff">
			<div>
				<span style="margin-right: 10px;color: #999;">日期</span>
				<el-date-picker v-model="params.year" type="year" placeholder="选择年" :clearable="false" value-format="yyyy">
				</el-date-picker>
				<el-button icon="el-icon-search" type="primary" @click="search()" size="small" class="ml10">查询</el-button>
			</div>
		</div>

		<slot name="header"></slot>

		<div style="margin-top: 10px;">
			<el-table :data="tableData.list" style="width: 100%" size="mini" v-cloak border>
				<el-table-column type="index" label="序号" width="50">
				</el-table-column>
				<el-table-column prop="gasOutletName" label="排口" width="150">
				</el-table-column>
				<el-table-column prop="gasOutletNo" label="编号" width="150">
				</el-table-column>
				<el-table-column prop="gasOutletApproachStr" label="排口类型" width="150">
				</el-table-column>
				<!-- <el-table-column label="监测频次" prop="frequencyStr" width="150">
				</el-table-column> -->
				<el-table-column prop="totalSurveyNum" label="计划监测" width="100">
				</el-table-column>
				<el-table-column prop="completeSurveyNum" label="完成监测" width="100">
				</el-table-column>
				<el-table-column prop="overTimeNum" label="逾期监测" width="100">
				</el-table-column>
				<el-table-column prop="lastCompleteTime" label="最近监测">
				</el-table-column>
				<el-table-column prop="transferManager" label="操作">
					<template scope="scope">
						<span style="color: #4269f2;" @click="gotoDet(scope.row)" class="point">详情</span>
					</template>
				</el-table-column>
			</el-table>

			<div v-show="tableData.list&&tableData.list.length>0" align="right" style="margin-top: 10px">
				<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
					:current-page.sync="tableData.pageIndex" :page-sizes="[10,20,30,50]" :page-size="tableData.pageSize"
					layout="total, sizes, prev, pager, next, jumper" :total="tableData.total">
				</el-pagination>
			</div>
		</div>


	</div>
</template>

<script>
	import moment from 'moment'

	let that
	export default {
		components: {},
		data() {
			return {
				params: {
					ticketId: '',
					year: moment().format('YYYY'),
				},
				dateValues: [moment().startOf('month').format('YYYY-MM-DD'), moment().format('YYYY-MM-DD')],
				tableData: {
					total: 0,
					pageIndex: 1,
					pageSize: 20,
					list: []
				},
			}
		},
		created: function() {},
		mounted: function() {
			that = this

			that.params.ticketId = that.$store.state.token
			that.getTableData()
		},
		methods: {

			gotoDet(item) {
				that.$router.push("/wasteGas/surveyDet?ticketId=" + that.params.ticketId + "&surveyMainId=" + item.id+"&outletName="+item.gasOutletName+"&outletNo="+item.gasOutletNo)
			},

			search() {
				that.tableData.pageIndex = 1
				that.getTableData()
			},

			handleSizeChange: function(val) {
				that.tableData.pageIndex = 1;
				that.tableData.pageSize = val;
				that.getTableData();
			},

			handleCurrentChange: function(val) {
				that.tableData.pageIndex = val;
				that.getTableData();
			},


			//下载表格
			downLoadExcle() {
				let appPath = "https://www.weifeibangbang.com/"
				//let appPath = "http://localhost:8080/"
				let apiName = "sw/standBook/createProduceStandBookExcel"

				apiName = apiName + '?ticketId=' + that.params.ticketId + "&facilitatorId=" + that.params.facilitatorId
				if (that.params.startTime) apiName = apiName + '&startTime=' + that.params.startTime
				if (that.params.endTime) apiName = apiName + '&endTime=' + that.params.endTime
				window.open(appPath + apiName)
			},

			getTableData() {
				let apiName = "/gasOutlet/pageGasOutletSurvey"
				that.ajax({
					url: apiName + '?ticketId=' + that.params
						.ticketId + '&pageIndex=' + that.tableData.pageIndex + '&pageSize=' + that.tableData
						.pageSize,
					data: JSON.stringify(that.params),
					contentType: 'application/json',
					dataType: 'json',
					method: 'POST',
					success: function(result) {
						if (result.data) {
							for (let item of result.data.records) {
								item.lastCompleteTime = item.lastCompleteTime ? item.lastCompleteTime.split(" ")[0] : ''
							}
							that.tableData.list = result.data.records;
							that.tableData.total = result.data.total;
						}
					},
				})
			},

		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	.selectedClass {
		color: #426ab3;
		font-weight: bold;
	}
</style>